<template>
  <div class="app-container home">
    <el-row :gutter="20">
      <el-col :span="24">
        <h2 class="dashboard-title">警校生管理系统</h2>
      </el-col>
    </el-row>

    <!-- 系统初始化按钮 -->
    <el-row :gutter="20" style="margin-bottom: 20px;">
      <el-col :span="24" style="text-align: right;">
        <el-button type="danger" @click="handleInitSystem" v-hasPermi="['system:dashboard:init']">系统初始化</el-button>
      </el-col>
    </el-row>

<!--     第一行：模块卡片
    <el-row :gutter="20">
      <el-col :span="24">
        <div class="card-panel-row">
          <div class="card-panel">
            <div class="card-panel-icon-wrapper">
              <i class="el-icon-s-check"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">资格审查人数</div>
              <div class="card-panel-num">{{ qualificationCount }}</div>
            </div>
          </div>
          <div class="card-panel">
            <div class="card-panel-icon-wrapper">
              <i class="el-icon-s-platform"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">体能测评人数</div>
              <div class="card-panel-num">{{ physicalCount }}</div>
            </div>
          </div>
          <div class="card-panel">
            <div class="card-panel-icon-wrapper">
              <i class="el-icon-s-flag"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">体检面试人数</div>
              <div class="card-panel-num">{{ medicalCount }}</div>
            </div>
          </div>
          <div class="card-panel">
            <div class="card-panel-icon-wrapper">
              <i class="el-icon-s-help"></i>
            </div>
            <div class="card-panel-description">
              <div class="card-panel-text">职位选择人数</div>
              <div class="card-panel-num">{{ positionCount }}</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    &lt;!&ndash; 流程进度图表 &ndash;&gt;
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="24">
        <div class="card">
          <div class="card-header">
            <div class="card-title">系统流程进度</div>
          </div>
          <div class="card-body">
            <div class="flow-progress">
              <div class="flow-step">
                <div class="flow-step-title">资格审查</div>
                <div class="flow-step-progress">
                  <div class="flow-progress-bar">
                    <div class="flow-progress-inner" :style="{ width: qualificationPassRate + '%' }"></div>
                  </div>
                  <div class="flow-progress-text">通过率: {{ qualificationPassRate }}%</div>
                  <div class="flow-progress-count">{{ qualificationPassCount }} / {{ qualificationCount }}</div>
                </div>
                <div class="flow-step-arrow">→</div>
              </div>
              <div class="flow-step">
                <div class="flow-step-title">体能测评</div>
                <div class="flow-step-progress">
                  <div class="flow-progress-bar">
                    <div class="flow-progress-inner" :style="{ width: physicalPassRate + '%' }"></div>
                  </div>
                  <div class="flow-progress-text">通过率: {{ physicalPassRate }}%</div>
                  <div class="flow-progress-count">{{ physicalPassCount }} / {{ physicalCount }}</div>
                </div>
                <div class="flow-step-arrow">→</div>
              </div>
              <div class="flow-step">
                <div class="flow-step-title">体检面试</div>
                <div class="flow-step-progress">
                  <div class="flow-progress-bar">
                    <div class="flow-progress-inner" :style="{ width: medicalPassRate + '%' }"></div>
                  </div>
                  <div class="flow-progress-text">通过率: {{ medicalPassRate }}%</div>
                  <div class="flow-progress-count">{{ medicalPassCount }} / {{ medicalCount }}</div>
                </div>
                <div class="flow-step-arrow">→</div>
              </div>
              <div class="flow-step">
                <div class="flow-step-title">职位选择</div>
                <div class="flow-step-progress">
                  <div class="flow-progress-bar">
                    <div class="flow-progress-inner" :style="{ width: positionSelectRate + '%' }"></div>
                  </div>
                  <div class="flow-progress-text">选择率: {{ positionSelectRate }}%</div>
                  <div class="flow-progress-count">{{ positionCount }} / {{ medicalPassCount }}</div>
                </div>
              </div>
            </div>
            <div class="overall-conversion">
              <div class="overall-title">整体流程转化率</div>
              <div class="overall-value">{{ overallConversionRate }}%</div>
              <div class="overall-desc">从资格审查到职位选择的完整流程转化率</div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    &lt;!&ndash; 资格审查模块统计 &ndash;&gt;
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>资格审查通过率</span>
          </div>
          <div class="chart-wrapper">
            <el-progress type="circle" :percentage="qualificationPassRate" color="#67c23a"></el-progress>
            <div class="chart-info">
              <div class="info-item">
                <span class="info-label">已通过：</span>
                <span class="info-value">{{ passedCount }} 人</span>
              </div>
              <div class="info-item">
                <span class="info-label">未通过：</span>
                <span class="info-value">{{ failedCount }} 人</span>
              </div>
              <div class="info-item">
                <span class="info-label">审核中：</span>
                <span class="info-value">{{ reviewingCount }} 人</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>资格审查来源分布</span>
          </div>
          <div class="chart-bar">
            <div class="chart-bar-item" style="height: 60%;" v-for="(item, index) in educationDistribution" :key="index" :style="{height: item.percent + '%'}">
              <div class="chart-bar-label">{{ item.education }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    &lt;!&ndash; 体能测评模块统计 &ndash;&gt;
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>体能测评成绩分布</span>
          </div>
          <div class="chart-pie">
            <div class="pie-item" style="&#45;&#45;percentage: 35%; &#45;&#45;color: #67c23a;">优秀</div>
            <div class="pie-item" style="&#45;&#45;percentage: 45%; &#45;&#45;color: #409eff;">良好</div>
            <div class="pie-item" style="&#45;&#45;percentage: 15%; &#45;&#45;color: #e6a23c;">合格</div>
            <div class="pie-item" style="&#45;&#45;percentage: 5%; &#45;&#45;color: #f56c6c;">不合格</div>
            <div class="pie-center"></div>
          </div>
          <div class="chart-legend">
            <div class="legend-item">
              <span class="legend-dot" style="background-color: #67c23a;"></span>
              <span class="legend-text">优秀：{{ physicalGrades.filter(item => item.grade === '优秀').length }}人（35%）</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background-color: #409eff;"></span>
              <span class="legend-text">良好：{{ physicalGrades.filter(item => item.grade === '良好').length }}人（45%）</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background-color: #e6a23c;"></span>
              <span class="legend-text">合格：{{ physicalGrades.filter(item => item.grade === '合格').length }}人（15%）</span>
            </div>
            <div class="legend-item">
              <span class="legend-dot" style="background-color: #f56c6c;"></span>
              <span class="legend-text">不合格：{{ physicalGrades.filter(item => item.grade === '不合格').length }}人（5%）</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>体能测评男女比例</span>
          </div>
          <div class="gender-chart">
            <div class="gender-bar male">
              <i class="el-icon-male"></i>
              <div class="gender-progress">
                <div class="gender-progress-inner" style="width: 70%;"></div>
              </div>
              <div class="gender-label">男性：{{ maleCount }}人（70%）</div>
            </div>
            <div class="gender-bar female">
              <i class="el-icon-female"></i>
              <div class="gender-progress">
                <div class="gender-progress-inner" style="width: 30%;"></div>
              </div>
              <div class="gender-label">女性：{{ femaleCount }}人（30%）</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    &lt;!&ndash; 体检面试模块统计 &ndash;&gt;
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>体检面试通过率</span>
          </div>
          <div class="chart-wrapper">
            <el-progress type="circle" :percentage="medicalPassRate" color="#409eff"></el-progress>
            <div class="chart-info">
              <div class="info-item">
                <span class="info-label">通过体检：</span>
                <span class="info-value">{{ medicalPassCount }} 人</span>
              </div>
              <div class="info-item">
                <span class="info-label">通过面试：</span>
                <span class="info-value">{{ interviewPassCount }} 人</span>
              </div>
              <div class="info-item">
                <span class="info-label">全部通过：</span>
                <span class="info-value">{{ interviewPassCount }} 人</span>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :lg="12">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>面试成绩分布</span>
          </div>
          <div class="score-distribution">
            <div class="score-bar" v-for="(item, index) in scoreDistribution" :key="index" :style="{height: item.percent * 3 + 'px'}">
              <div class="score-value">{{ item.score }}%</div>
            </div>
          </div>
          <div class="score-labels">
            <div class="score-label">60-65</div>
            <div class="score-label">65-70</div>
            <div class="score-label">70-75</div>
            <div class="score-label">75-80</div>
            <div class="score-label">80-85</div>
            <div class="score-label">85+</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    &lt;!&ndash; 职位选择模块统计 &ndash;&gt;
    <el-row :gutter="20" class="chart-row">
      <el-col :xs="24" :sm="24" :md="24" :lg="24">
        <el-card class="chart-card">
          <div slot="header" class="clearfix">
            <span>职位申请热度分布</span>
          </div>
          <div class="position-heat">
            <div class="position-item" v-for="(item, index) in positions" :key="index">
              <div class="position-name">{{ item.name }}</div>
              <div class="position-progress">
                <div class="position-progress-inner" :style="{width: item.percent + '%', backgroundColor: item.color}"></div>
              </div>
              <div class="position-count">{{ item.count }}人</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>-->
  </div>
</template>

<script>
import { getSummaryData, getQualificationStats, getPhysicalStats, getMedicalStats, getPositionStats, initSystem } from "@/api/system/dashboard";

export default {
  name: "Index",
  data() {
    return {
      // 模拟数据，后续会替换为真实API数据
      qualificationCount: 0,
      physicalCount: 0,
      medicalCount: 0,
      positionCount: 0,
      // 资格审查数据
      passedCount: 0,
      failedCount: 0,
      reviewingCount: 0,
      qualificationPassRate: 0,
      educationDistribution: [],
      // 体能测评数据
      physicalGrades: [],
      maleCount: 0,
      femaleCount: 0,
      // 体检面试数据
      medicalPassRate: 0,
      medicalPassCount: 0,
      interviewPassCount: 0,
      scoreDistribution: [],
      // 职位选择数据
      positions: [],
      // 新增的转化率相关数据
      physicalPassRate: 0,
      physicalPassCount: 0,
      positionSelectRate: 0,
      overallConversionRate: 0
    };
  },
  created() {
    this.loadAllData();
  },
  methods: {
    goTarget(href) {
      window.open(href, "_blank");
    },
    // 加载所有统计数据
    loadAllData() {
      this.loading = true;
      Promise.all([
        this.loadSummaryData(),
        this.loadQualificationData(),
        this.loadPhysicalData(),
        this.loadMedicalData(),
        this.loadPositionData()
      ]).then(() => {
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    // 加载汇总数据
    loadSummaryData() {
      return getSummaryData().then(response => {
        const data = response.data;
        this.qualificationCount = data.qualificationCount;
        this.physicalCount = data.physicalCount;
        this.medicalCount = data.medicalCount;
        this.positionCount = data.positionCount;

        // 加载流程进度数据
        this.qualificationPassCount = data.qualificationPassCount || 0;
        this.qualificationPassRate = data.qualificationPassRate || 0;
        this.physicalPassCount = data.physicalPassCount || 0;
        this.physicalPassRate = data.physicalPassRate || 0;
        this.medicalPassCount = data.medicalPassCount || 0;
        this.medicalPassRate = data.medicalPassRate || 0;
        this.positionSelectRate = data.positionSelectRate || 0;
        this.overallConversionRate = data.overallConversionRate || 0;
      });
    },
    // 加载资格审查数据
    loadQualificationData() {
      return getQualificationStats().then(response => {
        const data = response.data;
        // 处理审查状态数据
        if (data.reviewStatusList && data.reviewStatusList.length > 0) {
          let passed = 0, failed = 0, reviewing = 0;
          data.reviewStatusList.forEach(item => {
            if (item.status === '通过') {
              passed = item.count;
            } else if (item.status === '未通过') {
              failed = item.count;
            } else if (item.status === '审核中') {
              reviewing = item.count;
            }
          });
          this.passedCount = passed;
          this.failedCount = failed;
          this.reviewingCount = reviewing;
          const total = passed + failed + reviewing;
          this.qualificationPassRate = total > 0 ? Math.round(passed / total * 100) : 0;
        }

        // 处理学历分布数据
        if (data.educationList) {
          this.educationDistribution = data.educationList;
        }
      });
    },
    // 加载体能测评数据
    loadPhysicalData() {
      return getPhysicalStats().then(response => {
        const data = response.data;

        // 处理成绩等级分布
        if (data.gradesList) {
          this.physicalGrades = data.gradesList;
        }

        // 处理性别分布
        if (data.genderList && data.genderList.length > 0) {
          data.genderList.forEach(item => {
            if (item.gender === '男') {
              this.maleCount = item.count;
            } else if (item.gender === '女') {
              this.femaleCount = item.count;
            }
          });
        }
      });
    },
    // 加载体检面试数据
    loadMedicalData() {
      return getMedicalStats().then(response => {
        const data = response.data;

        // 设置体检面试通过率
        this.medicalPassRate = data.totalPassRate || 0;
        this.medicalPassCount = data.medicalPassCount || 0;
        this.interviewPassCount = data.interviewPassCount || 0;

        // 处理面试成绩分布
        if (data.scoreList) {
          this.scoreDistribution = data.scoreList;
        }
      });
    },
    // 加载职位选择数据
    loadPositionData() {
      return getPositionStats().then(response => {
        const data = response.data;

        // 处理职位选择分布
        if (data.positionList && data.positionList.length > 0) {
          // 转换为前端需要的格式
          const positionArray = data.positionList.map((item, index) => {
            // 配置不同的颜色
            const colors = ["#f56c6c", "#409eff", "#67c23a", "#e6a23c", "#909399", "#36a3f7", "#40c9c6", "#34bfa3"];
            const total = data.positionList.reduce((sum, curr) => sum + curr.count, 0);
            const percent = total > 0 ? Math.round(item.count / total * 100) : 0;

            return {
              name: item.position,
              count: item.count,
              percent: percent,
              color: colors[index % colors.length]
            };
          });

          this.positions = positionArray;
        }
      });
    },
    handleInitSystem() {
      this.$confirm('确认要初始化系统吗？此操作将删除所有模块的数据，无法恢复！', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        initSystem().then(response => {
          this.$modal.msgSuccess("系统初始化成功");
          // 重新加载首页数据
          this.loadAllData();
        }).catch(err => {
          console.error(err);
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消初始化'
        });
      });
    }
  }
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
  background-color: #f0f2f5;

  .dashboard-title {
    font-size: 22px;
    text-align: center;
    color: #303133;
    margin-bottom: 30px;
    font-weight: bold;
  }

  .card-panel-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }

  .card-panel {
    position: relative;
    background-color: #fff;
    box-sizing: border-box;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    padding: 20px;
    margin-right: 15px;
    border-radius: 4px;
    width: 100%;
    display: flex;
    align-items: center;
  }

  .card-panel:last-child {
    margin-right: 0;
  }

  .card-panel-icon-wrapper {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: #409eff;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
  }

  .card-panel-icon-wrapper i {
    font-size: 28px;
  }

  .card-panel-description {
    flex: 1;
  }

  .card-panel-text {
    font-size: 16px;
    color: #666;
    margin-bottom: 10px;
  }

  .card-panel-num {
    font-size: 26px;
    font-weight: bold;
  }

  /* 流程进度图表样式 */
  .card {
    background-color: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin-bottom: 20px;
  }

  .card-header {
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;
  }

  .card-title {
    font-size: 18px;
    font-weight: bold;
    color: #333;
  }

  .card-body {
    padding: 20px;
  }

  .flow-progress {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
  }

  .flow-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
  }

  .flow-step-title {
    font-size: 16px;
    margin-bottom: 15px;
    font-weight: bold;
    color: #333;
  }

  .flow-step-progress {
    width: 100%;
    padding: 0 10px;
  }

  .flow-progress-bar {
    height: 12px;
    background-color: #f5f5f5;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 10px;
  }

  .flow-progress-inner {
    height: 100%;
    background-color: #67c23a;
    border-radius: 6px;
  }

  .flow-progress-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
  }

  .flow-progress-count {
    font-size: 14px;
    color: #999;
  }

  .flow-step-arrow {
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    color: #909399;
    z-index: 2;
  }

  .flow-step:last-child .flow-step-arrow {
    display: none;
  }

  .overall-conversion {
    text-align: center;
    padding: 20px;
    background-color: #f5f7fa;
    border-radius: 4px;
  }

  .overall-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 15px;
  }

  .overall-value {
    font-size: 32px;
    font-weight: bold;
    color: #409eff;
    margin-bottom: 10px;
  }

  .overall-desc {
    font-size: 14px;
    color: #999;
  }

  .chart-row {
    margin-bottom: 20px;
  }

  .chart-card {
    margin-bottom: 20px;

    .chart-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-around;
      height: 300px;

      .chart-info {
        .info-item {
          margin-bottom: 10px;

          .info-label {
            color: #606266;
            font-size: 14px;
          }

          .info-value {
            color: #303133;
            font-size: 16px;
            font-weight: bold;
          }
        }
      }
    }

    .chart-bar {
      height: 300px;
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      padding: 0 20px;

      .chart-bar-item {
        flex: 1;
        margin: 0 15px;
        background-color: #ffc53d;
        position: relative;
        border-radius: 4px 4px 0 0;

        .chart-bar-label {
          position: absolute;
          bottom: -30px;
          left: 0;
          width: 100%;
          text-align: center;
          color: #606266;
        }
      }
    }

    .chart-pie {
      position: relative;
      width: 220px;
      height: 220px;
      border-radius: 50%;
      margin: 20px auto;
      background: conic-gradient(
        #67c23a 0% 35%,
        #409eff 35% 80%,
        #e6a23c 80% 95%,
        #f56c6c 95% 100%
      );

      .pie-item {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 14px;
        color: white;
        font-weight: bold;
      }

      .pie-center {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 120px;
        height: 120px;
        background: white;
        border-radius: 50%;
      }
    }

    .chart-legend {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      margin-top: 20px;

      .legend-item {
        display: flex;
        align-items: center;
        margin: 0 10px 10px;

        .legend-dot {
          width: 12px;
          height: 12px;
          border-radius: 50%;
          margin-right: 6px;
        }

        .legend-text {
          font-size: 14px;
          color: #606266;
        }
      }
    }

    .gender-chart {
      padding: 30px 20px;

      .gender-bar {
        display: flex;
        align-items: center;
        margin-bottom: 40px;

        i {
          font-size: 32px;
          margin-right: 20px;
        }

        &.male {
          i {
            color: #409eff;
          }

          .gender-progress-inner {
            background-color: #409eff;
          }
        }

        &.female {
          i {
            color: #f56c6c;
          }

          .gender-progress-inner {
            background-color: #f56c6c;
          }
        }

        .gender-progress {
          flex: 1;
          height: 20px;
          background-color: #ebeef5;
          border-radius: 10px;
          overflow: hidden;
          margin-right: 20px;

          .gender-progress-inner {
            height: 100%;
            border-radius: 10px;
          }
        }

        .gender-label {
          min-width: 150px;
          font-size: 14px;
        }
      }
    }

    .score-distribution {
      display: flex;
      justify-content: space-around;
      align-items: flex-end;
      height: 250px;
      padding: 20px;
      margin-bottom: 40px;

      .score-bar {
        width: 40px;
        background-color: #409eff;
        border-radius: 4px 4px 0 0;
        position: relative;

        .score-value {
          position: absolute;
          top: -25px;
          width: 100%;
          text-align: center;
          font-size: 12px;
        }
      }
    }

    .score-labels {
      display: flex;
      justify-content: space-around;

      .score-label {
        width: 40px;
        text-align: center;
        font-size: 12px;
        color: #606266;
      }
    }

    .position-heat {
      padding: 15px;

      .position-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;

        .position-name {
          width: 100px;
          font-size: 14px;
          color: #606266;
        }

        .position-progress {
          flex: 1;
          height: 20px;
          background-color: #ebeef5;
          border-radius: 10px;
          overflow: hidden;
          margin: 0 20px;

          .position-progress-inner {
            height: 100%;
            border-radius: 10px;
          }
        }

        .position-count {
          width: 60px;
          text-align: right;
          font-size: 14px;
          color: #303133;
        }
      }
    }
  }
}
</style>

